<template>
  <Main>
    <el-button type="primary" @click="add()" size="small" icon="el-icon-plus">新建字典类型</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="kid"
      :empty-text="emptyText"
      default-expand-all
      @sort-change="sortChange"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column fixed prop="name" label="字典表名称"></el-table-column>
      <el-table-column prop="note" label="字典描述"></el-table-column>
      <el-table-column prop="showOrders" label="排序值" ></el-table-column>
      <el-table-column prop="icon" label="图标"></el-table-column>
      <el-table-column fixed="right" label="复制url">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="复制url" placement="top-start">
            <el-button type="primary" size="small" @click="copyUrl(scope.row.code)">
              <i class="el-icon-copy-document"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="edit(scope.row.objectId)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="small" @click="del(scope.row.objectId)">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page
      :page="formInline.current"
      :limit="formInline.size"
      :total="formInline.total"
      @change="changePage"
    ></page>
    <Add ref="Add" @refresh="fetch"></Add>
    <Edit ref="Edit" @refresh="fetch"></Edit>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import { baseUrl } from "@/config/env";
import Add from "./add";
import Edit from "./edit";

const urls = {
  delete: baseUrl + "/dict/sys-dict-type/delete",
  list: baseUrl + "/dict/sys-dict-type/page",
  getUrl: baseUrl + "/api/dict/list"
};
export default {
  methods: {
    sortChange(column, prop, order) {
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.fetch();
    },
    changePage(val) {
      this.formInline.current = val;
      this.fetch();
    },
    add: function() {
      this.$refs.Add.show();
    },
    edit: function(objectId) {
      this.$refs.Edit.show(objectId);
    },
    copyUrl(CODE) {
      this.shearPlate(urls.getUrl + "?type_code=" + CODE);
      this.$message({
        message: "复制成功",
        type: "success"
      });
    },
    del: function(objectId) {
      this.$confirm("确认要删除该字典类型吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.delete, { params: { objectId: objectId } }).then(res => {
          this.$message(res.data.result);
          this.fetch();
        });
      });
    },
    shearPlate(text) {
      //复制到剪切板
      var node = document.createElement("input");
      node.value = text;
      document.body.appendChild(node);
      node.select();
      var res = document.execCommand("copy");
      document.body.removeChild(node);
      return res;
    },
    fetch() {
      axios.get(urls.list, { params: { page: 1, limit: 10 } }).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        this.emptyText = "暂无数据"
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        name: null,
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: [],
        sorter: {}
      },
      tableData: [],
      emptyText : "加载中..."
    };
  },
  components: {
    Add,
    Edit,
    Main,
    page
  }
};
</script>